<!DOCTYPE html>

<link rel="stylesheet" href="../../../styles.css" />

<style>
  #floating {
    height: 300px;
  }
</style>

<div id="reference">Ref</div>
<div id="floating">
  Pop
  <div id="arrowElement"></div>
</div>

<script type="module">
  import {computePosition, shift, arrow} from '../../../dist/index.mjs';
  import {position} from '../../../utils.mjs';

  computePosition(reference, floating, {
    placement: 'right',
    middleware: [
      shift({
        padding: {top: 125},
      }),
      arrow({element: arrowElement}),
    ],
  }).then(position);
</script>
